<!DOCTYPE html>
<html class="g-html">
<head>
	<meta charset="utf-8" />
	<meta name="renderer" content="webkit" />
	<meta name="keywords" content="Nui,Nui框架,Nui组件,axnfex,诺诺框架,诺诺前端,爱信诺框架,爱信诺前端" />
	<meta name="description" content="Nui框架是诺诺网前端团队根据自身业务的特点开发出来的模块化前端框架，提供了丰富的组件以适应不同业务需求进行快速开发。" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Nui.js</title>
    <link rel="icon" type="image/vnd.microsoft.icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="icon" type="image/x-icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="shortcut icon" type="image/x-icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="stylesheet" type="text/css" href="/nui/assets/style/base-min.css?v=0de6a3f"/>
    
</head>
<body class="g-body">
	<!-- header -->
	<div class="g-header f-clearfix">
	    <a class="m-logo f-fl" href="/nui/">
            <img src="/nui/assets/images/logo.png?v=a987f30" alt="Nui.js" class="f-fl" />
            <em class="f-fl e-ml10 f-fs24">Nui.js</em>
        </a>
        <ul class="m-nav f-fr f-fs16">
            
	
	
    <li class="f-fl">
        <a class="s-crt" href="/nui/pages/">教程</a>
    </li>
    <li class="f-fl">
        <a href="https://axnfex.github.io/2017/02/28/jobs/" target="_blank">加入我们</a>
    </li>
    <li class="f-fl">
        <a href="http://zjaisino.github.io/" target="_blank">前端规范</a>
    </li>
    <li class="f-fl">
        <a href="https://axnfex.github.io/" target="_blank">团队博客</a>
    </li>


        </ul>
	</div>
	<!-- /header -->

	<!-- content -->
	<div class="g-content">
    
	<div class="g-main f-fr">
		<div class="mainbox">
			<h1 class="e-pt20 e-pb20 f-fs28">路由</h1>
			<div class="e-mt15 f-lh22">
				<p>页面不刷新实现页面切换效果，用于开发单页应用</p>
			</div>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10">使用模块</h2>
			<div class="e-mt15 f-lh22">
				<p>在页面中创建元素，并包含href属性，并且创建一个空元素作为渲染容器</p>
				<p>
					<a href="/nui/src/components/router.js" class="f-corange" target="_blank">下载</a>
					路由组件作为依赖项引入到模块中，并创建实例，查看
					<a href="./demo.html" class="f-corange" target="_blank">demo</a>
				</p>
			</div>
<script type="text/highlight" data-xml-options>
<a href="/home/" id="home">首页</a>
<a href="/news/" id="news">资讯</a>
<div id="main"></div>
</script>
<script type="text/highlight" data-javascript-options>
Nui.define(['{com}/router'], function(router){
    
	router({
		target:'#home',
		entry:true,
		path:'/home/',
		container:'#main',
		template:'<p>这是首页</p>',
	})

	router({
		target:'#news, .news',
		entry:true,
		path:'/news/:id/:title',
		container:'#main',
		level:2,
		template:{
			list:'<ul>'+
					'<%each list%>'+
					'<li><a href="<%$value.url%>/<%$value.title%>" class="news"><%$value.title%></a></li>'+
					'<%/each%>'+
				'</ul>',
			detail:'<div>'+
						'<h3><%params.title%></h3>'+
						'<p>这是<%params.title%>详情，id是<%params.id%>。</p>'+
					'</div>'
		},
		data:{
			list:[{
				url:'/news/1',
				title:'资讯1'
			},{
				url:'/news/2',
				title:'资讯2'
			}, {
				url:'/news/3',
				title:'资讯3'
			}]
		},
		onChange:function(){
			var tpl = this.template, params = this.data.params;
			if(params.id && params.title){
				tpl.main = tpl.detail;
			}
			else{
				tpl.main = tpl.list;
			}
		}
	})

	router.start()
})
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10">选项参数</h2>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> path</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：路径匹配规则，冒号为动态参数名</p>
				<p>类型：{String}</p>
				<p>默认：null</p>
				<p>必填：<b class="f-cgreen f-fs16">✔</b></p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	path:'/news/:type/:id/'
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> level</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：路径匹配等级</p>
				<p>类型：{Number}</p>
				<p>默认：2</p>
				<p>说明：当匹配规则path中包含参数时才会启用，取值分别为0、1、2。当值为0时url（#!后面路径）必须满足匹配条件，参数不能少；当值为1时允许url少参数，但不能无参数；当值为2时允许url不传参数</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	level:2
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> entry</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：是否为入口页面</p>
				<p>类型：{Boolean}</p>
				<p>默认：false</p>
				<p>说明：页面中只能设置一个入口；当url不满足path规则时，会自动跳转到入口页面</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	entry:true
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> container</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：渲染容器</p>
				<p>类型：{String, Object} 选择器、DOM、jQuery对象</p>
				<p>默认：null</p>
				<p>必填：<b class="f-cgreen f-fs16">✔</b></p>
				<p>说明：wrapper元素所在容器</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	container:'#main'
})
router({
	container:$('#main')
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> target</h3>
			<div class="e-mt15 f-lh22">
				<p>说明：绑定元素</p>
				<p>类型：{String, Object} 选择器、DOM、jQuery对象</p>
				<p>默认：null</p>
				<p>说明：该元素必须已存在，并且包含href属性，且满足path规则</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	target:'#home'
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> wrapper</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：路由实例内容是否独占一个容器（框架自动为内容创建一个&lt;div class="nui-router-wrapper" /&gt;容器，这里简称为wrapper元素吧）</p>
				<p>类型：{Boolean, Selector}</p>
				<p>默认：false</p>
				<p>说明：值为false时，所有设置该值的路由实例内容都将共享一个容器，每次加载都会触发onInit回调；当值为true时，实例会独占一个容器，仅在第一次加载时会触发onInit回调；也可以手动设置wrapper元素，即值为选择器时，元素必须包含类名nui-router-wrapper，且是container的子元素。</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	wrapper:true
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> data</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：模版渲染数据</p>
				<p>类型：{Object}</p>
				<p>默认：{}</p>
				<p>功能：默认值包含path（路由地址），url（包含动态参数路由地址），query（路由查询参数，“?”后面的参数），params（路由参数，包含查询参数与动态参数），默认值不可手动修改。</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	template:'<a href="<%url%>"><%name%></a>',
	data:{
		name:'地址跳转'
	}
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> template</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：渲染模版</p>
				<p>类型：{String, Object}</p>
				<p>默认：''</p>
				<p>说明：当值为对象（多个模版）时，必须存在名称为main模版作为主模版，模版中可以直接访问data中数据</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	template:'<div><%path%></div>'
})
router({
	template:{
		main:'<div><%include 'list'%></div>',
		list:'<p><%each params%>...<%/each%></p>'
	}
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> events</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：绑定事件，用法参考<a class="f-corange" href="/nui/pages/events.html">代理事件</a></p>
				<p>类型：{Object}</p>
				<p>默认值：null</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	events:{
		'click #button':'calback'
	},
	calback:function(){

	}
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onBefore</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：target点击触发，若返回false将不执行后续操作</p>
				<p>类型：{Function}</p>
				<p>默认：null</p>
				<p>参数：change {Function} 调用后会强行切换路由地址</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	onBefore:function(change){
		if(flag){
			return false
		}
		else{
			change()
		}
	}
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onData</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：接收数据时回调</p>
				<p>类型：{Function}</p>
				<p>默认：null</p>
				<p>参数：data {Anything} 接收数据</p>
				<p>说明：配合类方法location使用</p>
			</div>
<script type="text/highlight" data-javascript-options>
router.location('/index/', 'hello world')

router({
	path:'/index/',
	onData:function(data){
		console.log(data) //hello world
	}
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onChange</h3>
			<div class="e-mt15 f-lh22">
				<p>说明：路由地址切换后触发回调</p>
				<p>类型：{Function}</p>
				<p>默认：null</p>
				<p>说明：在渲染模版之前触发，函数返回false时则不会执行渲染模版，不会触发onInit和onAfter</p>
			</div>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onRender</h3>
			<div class="e-mt15 f-lh22">
				<p>说明：渲染模版后触发</p>
				<p>类型：{Function}</p>
				<p>默认：null</p>
				<p>说明：每次调用实例的render方法都会触发</p>
			</div>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onInit</h3>
			<div class="e-mt15 f-lh22">
				<p>说明：渲染模版后触发</p>
				<p>类型：{Function}</p>
				<p>默认：null</p>
				<p>说明：当选项参数wrapper为true时仅会触发一次</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	path:'/news/:type/:id',
	onInit:function(){
		if(data.param.type === '1'){
			this.element.html(data.cache || '<div>.....</div>')
		}
		else{
			this.element.html('<div>.....</div>')
		}
	}
})
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> onAfter</h3>
			<div class="e-mt15 f-lh22">
				<p>说明：渲染模版后触发</p>
				<p>类型：{Function}</p>
				<p>默认：null</p>
				<p>说明：不论选项参数wrapper是何值都触发</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	path:'/news/:type/:id',
	onInit:function(){
		//渲染操作
	},
	onAfter:function(){
		$(this.target).addClass('active').siblings().removeClass('active')
	}
})
</script>
			
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> 说明</h3>
			<div class="e-mt15 f-lh22">
				<p>在选项参数函数中可以通过this.element访问到页面容器的jquery实例（类名为nui-router-wrapper的元素），绑定事件必须代理为该元素。<span class="f-cred">万万不可将事件代理到页面加载就存在的元素上，比如documeng或者body，因为每次切换路由都会触发回调导致事件被多次绑定！</span></p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	onInit:function(){
		this.element.find('select').hide();
		this.show()
	},
	show:function(){
		this.bind()
	},
	bind:function(data){
		console.log(data) //加载时打印undefined，当a标签点击后打印hello world
	},
	events:{
		'click a':'check click'
	},
	check:function(){
		return 'hello world'
	},
	click:function(e, elem, data){
		this.bind(data)
	}
})
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10">实例方法</h2>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> render</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：渲染模版，调用后会触发onRender回调，该方法一般在onInit中异步请求数据后调用</p>
				<p>类型：{Function}</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	template:'<%each list%><%$index%>:<%$value%><%/each%>',
	data:{
		list:[]
	},
	onInit:function(){
		var that = this;
		$.get('url', function(res){
			that.data.list = res;
			that.self.render()
		})
	}
})
</script>
			<h2 class="e-pt20 f-fs22 f-bb e-pb10">类方法</h2>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> start</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：初始化了路由跳转到主入口页面</p>
				<p>类型：{Function}</p>
			</div>
<script type="text/highlight" data-javascript-options>
router({
	target:'#home',
	path:'/home/',
	entry:true
})

router({
	target:'#news',
	path:'/news/'
})

router.start()
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> location</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：路由跳转，跳转的地址必须匹配已设置的路由规则，否则不会跳转</p>
				<p>类型：{Function}</p>
				<p>参数：url {String} 跳转地址</p>
				<p>参数：data {Anything} 跳转传递数据，跳转后的页面通过onData函数可接收</p>
				<p>参数：render {Boolean} 是否重新渲染目标页面</p>
			</div>
<script type="text/highlight" data-javascript-options>
router.location('/index/', {});
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> forward</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：前进，等同history.forward，可无需手动调用该方法，在元素添加类属性nui-router-forward即可</p>
				<p>类型：{Function}</p>
				<p>参数：index {Number} 要访问的url在历史记录的位置</p>
			</div>
<script type="text/highlight" data-javascript-options>
selector.on('click', function(){
	router.forward();
})

<a class="nui-router-forward">前进</a>
</script>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> back</h3>
			<div class="e-mt15 f-lh22">
				<p>功能：返回，等同history.back，可无需手动调用该方法，在元素添加类属性nui-router-back即可</p>
				<p>类型：{Function}</p>
				<p>参数：index {Number} 要访问的url在历史记录的位置</p>
			</div>
<script type="text/highlight" data-javascript-options>
selector.on('click', function(){
	router.back();
})

<a class="nui-router-back">后退</a>
</script>
		</div>	
	</div>
	
	
<div class="f-fl g-sidecol">
    <div class="side">
        <ul class="m-menu f-lh28">
            <li>
                <a class="f-fs16" href="/nui/pages/">介绍</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/doc.html">API文档</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/util.html">实用工具</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/template.html">模板引擎</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/events.html">代理事件</a>
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/element.html">页面元素</a>
                
            </li>
            <li>
                <a class="f-fs16 s-crt" href="/nui/pages/components/">交互组件</a>
                
                <ul>
                    <li>
                        <a  href="/nui/pages/components/#开发组件">开发组件</a>
                        
                    </li>
                    <li>
                        <a class="s-crt" href="/nui/pages/components/router/">路由</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/layer/">弹出层</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/datagrid/">数据网格</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/placeholder/">输入框占位符</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/input/">输入框增强</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/popover/">提示框</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/search/">搜索</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/select/">选择器</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/calendar/">日历</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/tab/">选项卡</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/paging/">分页</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/carousel/">走马灯</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/upload/">文件上传</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/radio/">单选框</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/checkbox/">复选框</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/fixed/">固钉</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/fixed/">数字输入</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/print/">打印</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/collapse/">折叠面板</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/validate/">表单校验</a>
                    </li>
                </ul>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/pack.html">打包工具</a>
                
            </li>
        </ul>
    </div>
</div>


	</div>
	<!-- /content -->

	

    <script type="text/javascript" src="/nui/assets/script/jquery.min.js?v=4223d4c"></script>
<script type="text/javascript" src="/nui/dist/nui-load-min.js?v=94ae756"></script>
<script type="text/javascript" src="/nui/config.js?v=661668d"></script>
    
    <script type="text/javascript">
	Nui.load("{script}/base-min", function(page){
        page.init()
    })
    </script>
    
    <script type="text/javascript">
    
    </script>
</body>
</html>